<template>
	<view>
		<view class="TC" v-if="isShow">
			<view class="box">

				<view class="box1">
					<view class="box1-a">
						<view style="color: rgb(164,133,237);font-size: 24px;">恭喜你合成成功</view>
						<view style="color: rgb(164,133,237);
    font-size: 24px;">获得勋章</view>
						<view>
							<!-- 图片代替 -->
							<image style="width: 720rpx; height:720rpx"
								src="../../../static/icon/bacnkg1.png" alt="">
								<!-- 视频 -->
								<!-- <video src=""></video> -->
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC">确 认</button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!--  -->
		<view class="box" :style=" 'filter: blur('+mackNum+'px);'">
			<NavBar></NavBar>
			<view style="text-align: center; font-size: 42rpx;color:rgb(148,113,254);margin-top: -60rpx;">合成勋章</view>
			<view class="grid">
				<view class="gridchild">
					<!-- <image :src="'../../../static/icon/图标4/1.png'" mode=""></image> -->
					<text class="text">文学勋章</text>
				</view>
				<view class="gridchild1"><text class="text">文学勋章</text>
					<!-- <image :src="'../../../static/icon/图标4/2.png'" mode=""></image> -->
				</view>
				<view class="gridchild2"><text class="text">文学勋章</text>
					<!-- <image :src="'../../../static/icon/图标4/3.png'" mode=""></image> -->
				</view>
				<view class="gridchild4"><text class="text">文学勋章</text>
					<!-- <image :src="'../../../static/icon/图标4/4.png'" mode=""></image> -->
				</view>
			</view>
			<view class="hc">
				<view class="btnA"><button>合成</button></view>
			</view>
			<view class="boImg">
				<image src="../../../static/icon/bacnkg1.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../../components/NavBar-a.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				mackNum: 3,
				isMack: true,
				isShow: true,
				custom: {
					backgroundColor: "red",
					height: '200rpx'
				},

			}
		},
		methods: {
			closeTC() {
				this.mackNum = 0
				this.isShow = !this.isShow
				console.log(this.isShow);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.TC {
		.toptext {
			position: absolute;
			// top: -8%;
			top: 100rpx;
			left: 35%;
			z-index: 999;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text-a {

				font-size: 46rpx;
			}

			.text-b {
				color: rgb(148, 113, 254);
				font-size: 32rpx;
			}
		}

		height: 100%;
		background-color: rgb(255, 255, 255);

		// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
		.title {
			text-align: center;
			line-height: 100rpx;
			font-size: 60rpx;
			color: rgb(164, 133, 237);
		}

		.box {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 300px;
					align-items: center;

					image {
						margin-top: -60rpx;
						width: 459rpx;
						height: 319rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 94%;
				height: 16px;
				background-color: #fffefe7d;
				box-shadow: 0px 5px 50px #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 3%;
				bottom: -16px;
				// /* z-index: -1;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;
			box-sizing: border-box;
			padding: 48rpx;
			box-shadow: 0px 10rpx 100rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 80%;
			height: 966rpx;
			border-radius: 2%;
			top: 228rpx;
			left: 10%;

			.btnA {

				width: 74%;
				margin: 0px auto;
				// margin-top: 40%;
				margin-top: -28px;

				uni-button {
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}
	}


	.box {
		.boImg {
			// width: 100%;
			margin: 0px auto;
			width: 375rpx;
			height: 375rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hc {
			.btnA {

				width: 58%;
				margin: 0px auto;
				margin-top: 40rpx;

				uni-button {
					color: #fff;
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			width: 428rpx;
			margin: 0px auto;
			background-image: url('@/static/icon/icon1/fz10.png');
			background-position: 100%;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		width: 100%;
		height: 100%;

		// background-color: #fff;
		.grid {

			.text {
				text-align: center;
				color: #fff;
				margin-top: 168rpx;
				margin-left: 40rpx;
			}

			.gridchild4 {
				display: flex;
				justify-content: flex-start;
				width: 254rpx;
				height: 253rpx;
				background-image: url('@/static/icon/icon4/4.png');
				background-position: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background-color: #9e9e9e80;	
				// image{
				// 	width: 254rpx;
				// 	height: 253rpx;
				// }
			}

			.gridchild2 {
				display: flex;
				justify-content: flex-start;
				width: 254rpx;
				height: 253rpx;
				background-image: url('@/static/icon/icon4/3.png');
				background-position: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background-color: #9e9e9e80;	
				// image{
				// 	width: 254rpx;
				// 	height: 253rpx;
				// }
			}

			.gridchild1 {
				display: flex;
				justify-content: flex-start;
				width: 254rpx;
				height: 253rpx;
				background-image: url('@/static/icon/icon4/2.png');
				background-position: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background-color: #9e9e9e80;	
				// image{
				// 	width: 254rpx;
				// 	height: 253rpx;
				// }
			}

			.gridchild {
				display: flex;
				justify-content: flex-start;
				width: 254rpx;
				height: 253rpx;
				background-image: url('@/static/icon/icon4/1.png');
				background-position: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background-color: #9e9e9e80;	
				// image{
				// 	width: 254rpx;
				// 	height: 253rpx;
				// }
			}

			border-radius: 24px;
			box-shadow: 0px 5px 50px #9e9e9e80;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 0px auto;
			align-items: center;
			flex-wrap: wrap;
			width: 78%;
			display: flex;
			justify-content: space-evenly;
			/* align-items: center; */
			// height: 456rpx;
			height: 540rpx;
			// height: 90rpx;
			margin-top: 44rpx;

		}

	}
</style>
